<div class="section gf-form-group" ng-show="rule.tooltip">
    <h5 class="section-heading">
      Graph Tooltips
      <info-popover mode="right-normal">
        <span ng-bind-html="$GF.popover('Add Graph into the tooltip', 'TOOLTIPS','tooltip_graph')"> </span>
      </info-popover>
    </h5>
    <gf-form-switch class="gf-form" label-class="width-10" label="Display graph" checked="rule.tooltipForGraph"></gf-form-switch>
    <div class="gf-form" ng-if="rule.tooltipForGraph">
      <label class="gf-form-label width-10">Graph type
        <info-popover mode="right-normal">
          <span ng-bind-html="$GF.popover('Select type of graph', 'TOOLTIPS')"> </span>
        </info-popover>
      </label>
      <div class="gf-form-select-wrapper width-12">
        <select class="gf-form-input" ng-model="rule.graphType"
          ng-options="c.value as c.text for c in editor.tpGraphType"></select>
      </div>
    </div>
    <div class="gf-form" ng-if="rule.tooltipForGraph">
      <label class="gf-form-label width-10">Graph Size
        <info-popover mode="right-normal">
          <span ng-bind-html="$GF.popover('Select size of graph', 'TOOLTIPS','graph_size')"> </span>
        </info-popover>
      </label>
      <div class="gf-form-select-wrapper width-12">
        <select class="gf-form-input" ng-model="rule.graphSize"
          ng-options="c.value as c.text for c in editor.tpGraphSize"></select>
      </div>
    </div>
    <div class="gf-form" ng-if="rule.tooltipForGraph">
      <label class="gf-form-label width-6">Y-Min
        <info-popover mode="right-normal">
          <span ng-bind-html="$GF.popover('Select the min for the scale', 'TOOLTIPS')"> </span>
        </info-popover>
      </label>
      <input type="number" class="gf-form-input width-5" ng-model="rule.graphLow" ng-model-onblur placeholder="auto" data-placement="right" />
      <label class="gf-form-label width-6">Y-Max
        <info-popover mode="right-normal">
          <span ng-bind-html="$GF.popover('Select the max for the scale', 'TOOLTIPS')"> </span>
        </info-popover>
      </label>
      <input type="number" class="gf-form-input width-5" ng-model="rule.graphHigh" ng-model-onblur placeholder="auto" data-placement="right" />
    </div>
    <div class="gf-form" ng-if="rule.tooltipForGraph">
      <label class="gf-form-label width-10">Scale type
        <info-popover mode="right-normal">
          <span ng-bind-html="$GF.popover('Select scale type', 'TOOLTIPS')"> </span>
        </info-popover>
      </label>
      <div class="gf-form-select-wrapper width-12">
        <select class="gf-form-input" ng-model="rule.graphScale"
          ng-options="c.value as c.text for c in editor.tpGraphScale"></select>
      </div>
    </div>
  </div>
